<template>
  <div class="report-view">
    <el-card class="report-card">
      <template #header>
        <div class="card-header">
          <h3>报告生成</h3>
        </div>
      </template>

      <div class="report-content">
        <div class="report-form">
          <el-form :model="reportForm" label-width="100px">
            <el-form-item label="报告类型">
              <el-select v-model="reportForm.type" placeholder="请选择报告类型">
                <el-option label="完整报告" value="full"></el-option>
                <el-option label="简要报告" value="brief"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="包含内容">
              <el-checkbox-group v-model="reportForm.sections">
                <el-checkbox label="patient_info">患者信息</el-checkbox>
                <el-checkbox label="segmentation">分割结果</el-checkbox>
                <el-checkbox label="statistics">统计分析</el-checkbox>
                <el-checkbox label="images">医学图像</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="generateReport">生成报告</el-button>
              <el-button @click="previewReport">预览</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="preview-section">
          <h4>报告预览</h4>
          <div class="preview-container" ref="previewRef">
            <template v-if="previewContent">
              <div class="report-header">
                <h2>医学影像分析报告</h2>
                <p>报告时间：{{ new Date().toLocaleString() }}</p>
              </div>

              <div v-if="reportForm.sections.includes('patient_info')" class="section">
                <h3>患者信息</h3>
                <el-descriptions :column="2" border>
                  <el-descriptions-item label="姓名">张三</el-descriptions-item>
                  <el-descriptions-item label="性别">男</el-descriptions-item>
                  <el-descriptions-item label="年龄">45岁</el-descriptions-item>
                  <el-descriptions-item label="检查号">CT2024001</el-descriptions-item>
                </el-descriptions>
              </div>

              <div v-if="reportForm.sections.includes('segmentation')" class="section">
                <h3>分割结果</h3>
                <div class="image-grid">
                  <div class="result-image">
                    <div class="mock-image">
                      <el-icon :size="32"><Picture /></el-icon>
                      <span>横断面分割结果</span>
                    </div>
                    <p>横断面分割结果</p>
                  </div>
                  <div class="result-image">
                    <div class="mock-image">
                      <el-icon :size="32"><Picture /></el-icon>
                      <span>冠状面分割结果</span>
                    </div>
                    <p>冠状面分割结果</p>
                  </div>
                </div>
              </div>

              <div v-if="reportForm.sections.includes('statistics')" class="section">
                <h3>统计分析</h3>
                <el-table :data="statisticsData" border style="width: 100%">
                  <el-table-column prop="metric" label="指标"></el-table-column>
                  <el-table-column prop="value" label="数值"></el-table-column>
                  <el-table-column prop="unit" label="单位"></el-table-column>
                </el-table>
              </div>

              <div class="section">
                <h3>诊断意见</h3>
                <p>{{ diagnosis }}</p>
              </div>
            </template>
            <div v-else class="placeholder">
              <el-empty description="报告预览将在这里显示" />
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import html2canvas from 'html2canvas'
import { jsPDF } from 'jspdf'
import { Picture } from '@element-plus/icons-vue'

const previewRef = ref<HTMLElement | null>(null)
const previewContent = ref(false)

const reportForm = reactive({
  type: '',
  sections: [] as string[]
})

const statisticsData = [
  { metric: '体积', value: '125.6', unit: 'cm³' },
  { metric: '平均密度', value: '-850', unit: 'HU' },
  { metric: '最大直径', value: '68.5', unit: 'mm' },
  { metric: '表面积', value: '1256.8', unit: 'mm²' }
]

const diagnosis = ref('根据影像学表现，考虑为良性肺结节，建议3个月后复查。')

const generateReport = async () => {
  if (!reportForm.type || reportForm.sections.length === 0) {
    ElMessage.warning('请选择报告类型和内容')
    return
  }

  try {
    const element = previewRef.value
    if (!element) return

    const canvas = await html2canvas(element, {
      scale: 2,
      useCORS: true,
      logging: false
    })

    const pdf = new jsPDF('p', 'mm', 'a4')
    const imgWidth = 210 // A4纸的宽度(mm)
    const pageHeight = 297 // A4纸的高度(mm)
    const imgHeight = (canvas.height * imgWidth) / canvas.width
    let heightLeft = imgHeight
    let position = 0

    pdf.addImage(canvas, 'JPEG', 0, position, imgWidth, imgHeight, '', 'FAST')
    heightLeft -= pageHeight

    while (heightLeft >= 0) {
      position = heightLeft - imgHeight
      pdf.addPage()
      pdf.addImage(canvas, 'JPEG', 0, position, imgWidth, imgHeight, '', 'FAST')
      heightLeft -= pageHeight
    }

    pdf.save('医学影像分析报告.pdf')
    ElMessage.success('报告生成成功')
  } catch (error) {
    console.error('Error generating report:', error)
    ElMessage.error('报告生成失败')
  }
}

const previewReport = () => {
  if (!reportForm.type || reportForm.sections.length === 0) {
    ElMessage.warning('请选择报告类型和内容')
    return
  }
  previewContent.value = true
}
</script>

<style scoped>
.report-view {
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #f5f7fa;
}

.report-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.report-content {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  height: calc(100% - 60px);
}

.preview-section {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  height: 100%;
  overflow: auto;
}

.preview-container {
  background: #fff;
  padding: 40px;
  min-height: 800px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.report-header {
  text-align: center;
  margin-bottom: 30px;
}

.section {
  margin-bottom: 30px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 20px 0;
}

.result-image {
  text-align: center;
}

.result-image img {
  width: 100%;
  max-width: 300px;
  border-radius: 4px;
}

.result-image p {
  margin-top: 10px;
  color: #666;
}

.placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mock-image {
  width: 100%;
  height: 200px;
  background-color: #f5f7fa;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #909399;
}

.mock-image span {
  font-size: 14px;
}
</style> 